<div class="row hidden-mobile">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <h1 class="page-title txt-color-blueDark">
            <!-- PAGE HEADER -->
            <i class="fa-fw fa fa-puzzle-piece"></i>
            App Views
            <span>
                >
                Gallery
            </span>
        </h1>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 text-align-right">
        <div class="page-title">
            <a href="javascript:void(0);" class="btn btn-default">Upload</a>
            <a href="javascript:void(0);" class="btn btn-default">Load Library</a>
        </div>
    </div>
</div>

<!-- row -->
<div class="row">

    <!-- SuperBox -->
    <div class="superbox col-sm-12">
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-1.jpg" data-img="~/img/superbox/superbox-full-1.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Miller Cine" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-2.jpg" data-img="~/img/superbox/superbox-full-2.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Bridge of Edgen" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-3.jpg" data-img="~/img/superbox/superbox-full-3.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Lines of Friendship" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-4.jpg" data-img="~/img/superbox/superbox-full-4.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="My new car!" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-5.jpg" data-img="~/img/superbox/superbox-full-5.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Study Time" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-6.jpg" data-img="~/img/superbox/superbox-full-6.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="San Francisco Bridge" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-7.jpg" data-img="~/img/superbox/superbox-full-7.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="New Styla" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-8.jpg" data-img="~/img/superbox/superbox-full-8.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Cristpta" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-9.jpg" data-img="~/img/superbox/superbox-full-9.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Cristine Dine" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-10.jpg" data-img="~/img/superbox/superbox-full-10.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Mosaic Clock" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-11.jpg" data-img="~/img/superbox/superbox-full-11.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Elegance" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-12.jpg" data-img="~/img/superbox/superbox-full-12.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="China Town" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-13.jpg" data-img="~/img/superbox/superbox-full-13.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Sky Diving" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-14.jpg" data-img="~/img/superbox/superbox-full-14.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Country Music" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-15.jpg" data-img="~/img/superbox/superbox-full-15.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="You are late!" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-16.jpg" data-img="~/img/superbox/superbox-full-16.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Royal Bengle Tiger" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-17.jpg" data-img="~/img/superbox/superbox-full-17.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Snowpine" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-18.jpg" data-img="~/img/superbox/superbox-full-18.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Hop Jop Mop" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-19.jpg" data-img="~/img/superbox/superbox-full-19.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Party Girls" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-20.jpg" data-img="~/img/superbox/superbox-full-20.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Dragon Fly" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-21.jpg" data-img="~/img/superbox/superbox-full-21.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Kinds Road" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-22.jpg" data-img="~/img/superbox/superbox-full-22.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Tokyo" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-23.jpg" data-img="~/img/superbox/superbox-full-23.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Rome" class="superbox-img">
        </div><!--
        -->
        <div class="superbox-list">
            <img src="~/img/superbox/superbox-thumb-24.jpg" data-img="~/img/superbox/superbox-full-24.jpg" alt="My first photoshop layer mask on a high end PSD template theme" title="Traning" class="superbox-img">
        </div>
        <div class="superbox-float"></div>
    </div>
    <!-- /SuperBox -->

    <div class="superbox-show" style="display: none; height: 300px;"></div>

</div>

<!-- end row -->
@section Scripts {
    <script type="text/javascript">
        /* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

        pageSetUp();

        /*
         * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
         * eg alert("my home function");
         * 
         * var pagefunction = function() {
         *   ...
         * }
         * loadScript("/js/plugin/_PLUGIN_NAME_.js", pagefunction);
         * 
         * TO LOAD A SCRIPT:
         * var pagefunction = function (){ 
         *  loadScript(".../plugin.js", run_after_loaded);	
         * }
         * 
         * OR
         * 
         * loadScript(".../plugin.js", run_after_loaded);
         */

        // PAGE RELATED SCRIPTS

        // pagefunction

        var pagefunction = function() {

            $('.superbox').SuperBox();

        };

        // end pagefunction

        // run pagefunction on load

        // load bootstrap-progress bar script
        loadScript("/js/plugin/superbox/superbox.min.js", pagefunction);


    </script>
}
